<template>
  <div id="Distribution">
    <el-tabs>
      <el-tab-pane label="城市分布图">
        <div id="province"></div>
      </el-tab-pane>
      <el-tab-pane label="趋势图（小时)">
        <div id="provincehour"></div>
      </el-tab-pane>
      <el-tab-pane label="趋势图（天）">
        <div id="provinceday"></div>
      </el-tab-pane>
      <el-tab-pane label="趋势图（月）">
        <div id="provincemonth"></div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { baseURL } from "../../utils/ipConfig";
export default {
  props: ["touchTest", "situationtitle"],
  data() {
    return {
      // 城市分布
      shujuData: {
        address: [],
        value: [],
      },
      // 城市分布(小时)
      hourData: {
        value: [],
        hours: [],
      },
      // 城市分布(天)
      dayData: {
        value: [],
        hours: [],
      },
      // 城市分布(月)
      monthData: {
        value: [],
        hours: [],
      },
      areaCode: "",
      startTime: "",
      endTime: "",
    };
  },
  watch: {
    touchTest() {
      this.getDataList();
      this.getDataListday();
      this.getDataListmonth();
    },
  },
  beforeMount() {},
  mounted() {
    this.item();
  },
  methods: {
    item() {
      let _this = this;
      let params = new URLSearchParams();
      params.append("startTime", "2021110110");
      _this.$ajax
        .post(`${baseURL.ip1}/pc/getBusinessStatisticsData_hour`, params)
        .then(function (res) {
          //请求成功
          let resData = res.data;
          if (resData.code == 200) {
            let hours = [];
            resData.data.forEach((item) => {
              // 日期
              hours.push(item.hour);
            });
            _this.endTime = hours[hours.length - 1];
            _this.getDataList();
            _this.getDataListday();
            _this.getDataListmonth();
          }
        })
        .catch(function (error) {
          //请求失败
          console.log(error);
        });
    },
    // 进入页面成功率加载
    getDataList() {
      let _this = this;
      _this.$ajax
        .post(`${baseURL.ip1}/pc/getCustomerAnalysisDataByArea`)
        .then(function (res) {
          //请求成功
          let resData = res.data;
          if (resData.code == 200) {
            for (let index = 0; index < resData.data.length; index++) {
              if (resData.data[index].cityCode == "") {
                resData.data.splice(index, 1);
              }
              if (resData.data[index].cityCode == "000") {
                resData.data.splice(index, 1);
              }
              if (resData.data[index].cityCode == "0650") {
                resData.data.splice(index, 1);
              }
            }
            _this.shujuData.address = resData.data.map(
              (item) => item.city_name
            );
            _this.shujuData.value = resData.data.map((item) => item.count);
            _this.province(_this.shujuData.address, _this.shujuData.value);
          }
        })
        .catch(function (error) {
          //请求失败
          console.log(error);
        });
      
        // 小时趋势图数据
      if (_this.areaCode == "" && _this.situationtitle == "全网") {
        let params = new URLSearchParams();
        params.append("startTime", _this.startTime);
        params.append("endTime", _this.endTime);
        // 小时趋势图数据
        _this.$ajax
          .post(`${baseURL.ip1}/pc/getBusinessStatisticsData_hour`)
          .then(function (res) {
            //请求成功
            let resData = res.data;
            if (resData.code == 200) {
              _this.hourData.value = [];
              _this.hourData.hours = [];
              resData.data.forEach((item) => {
                // 用户数
                _this.hourData.value.push(item.usercount);
                // 日期
                _this.hourData.hours.push(item.hour + "");
              });
              let time = [];
              time = _this.hourData.hours.map(
                (item) => item.substring(item.length - 2) + ":00"
              );
              _this.hourData.hours = time;
              _this.provincehour(_this.hourData.hours, _this.hourData.value);
            } else {
              _this.hourData.value = [];
              _this.provincehour(_this.hourData.hours, _this.hourData.value);
            }
          })
          .catch(function (error) {
            //请求失败
            console.log(error);
          });
      } else if (_this.areaCode == "" && _this.situationtitle != "全网") {
        let params = new URLSearchParams();
        params.append("dataType", _this.situationtitle);
        // params.append("startTime", _this.startTime);
        // params.append("endTime", _this.endTime);
        _this.$ajax
          .post(`${baseURL.ip1}/pc/getBusinessStatisticsData_hour`, params)
          .then(function (res) {
            //请求成功
            let resData = res.data;
            if (resData.code == 200) {
              _this.hourData.value = [];
              _this.hourData.hours = [];
              resData.data.forEach((item) => {
                // 用户数
                _this.hourData.value.push(item.usercount);
                // 日期
                _this.hourData.hours.push(item.hour + "");
              });
              let time = [];
              time = _this.hourData.hours.map(
                (item) => item.substring(item.length - 2) + ":00"
              );
              _this.hourData.hours = time;
              _this.provincehour(_this.hourData.hours, _this.hourData.value);
            } else {
              _this.hourData.value = [];
              _this.provincehour(_this.hourData.hours, _this.hourData.value);
            }
          })
          .catch(function (error) {
            //请求失败
            console.log(error);
          });
      } else if (_this.areaCode != "" && _this.situationtitle == "全网") {
        let params = new URLSearchParams();
        params.append("cityCode", _this.areaCode);
        // params.append("startTime", _this.startTime);
        // params.append("endTime", _this.endTime);
        _this.$ajax
          .post(`${baseURL.ip1}/pc/getBusinessStatisticsData_hour`, params)
          .then(function (res) {
            //请求成功
            let resData = res.data;
            if (resData.code == 200) {
              _this.hourData.value = [];
              _this.hourData.hours = [];
              resData.data.forEach((item) => {
                // 用户数
                _this.hourData.value.push(item.usercount);
                // 日期
                _this.hourData.hours.push(item.hour + "");
              });
              let time = [];
              time = _this.hourData.hours.map(
                (item) => item.substring(item.length - 2) + ":00"
              );
              _this.hourData.hours = time;
              _this.provincehour(_this.hourData.hours, _this.hourData.value);
            } else {
              _this.hourData.value = [];
              _this.provincehour(_this.hourData.hours, _this.hourData.value);
            }
          })
          .catch(function (error) {
            //请求失败
            console.log(error);
          });
      } else {
        let params = new URLSearchParams();
        params.append("cityCode", _this.areaCode);
        params.append("dataType", _this.situationtitle);
        // params.append("startTime", _this.startTime);
        // params.append("endTime", _this.endTime);
        _this.$ajax
          .post(`${baseURL.ip1}/pc/getBusinessStatisticsData_hour`, params)
          .then(function (res) {
            //请求成功
            let resData = res.data;
            if (resData.code == 200) {
              _this.hourData.value = [];
              _this.hourData.hours = [];
              resData.data.forEach((item) => {
                // 用户数
                _this.hourData.value.push(item.usercount);
                // 日期
                _this.hourData.hours.push(item.hour + "");
              });
              let time = [];
              time = _this.hourData.hours.map(
                (item) => item.substring(item.length - 2) + ":00"
              );
              _this.hourData.hours = time;
              _this.provincehour(_this.hourData.hours, _this.hourData.value);
            } else {
              _this.hourData.value = [];
              _this.provincehour(_this.hourData.hours, _this.hourData.value);
            }
          })
          .catch(function (error) {
            //请求失败
            console.log(error);
          });
      }
    },
    getDataListday() {
      let _this = this;
      if (_this.areaCode == "" && _this.situationtitle == "全网") {
        _this.$ajax
          .post(`${baseURL.ip1}/pc/getBusinessStatisticsData_hour`)
          .then(function (res) {
            //请求成功
            let resData = res.data;
            if (resData.code == 200) {
              _this.dayData.value = [];
              resData.data.forEach((item) => {
                // 用户数
                _this.dayData.value.push(item.tcp_create_time);
                // 日期
                //  _this.hourData.hours.push(item.hour + "");
              });
              // let time = [];
              // time = _this.hourData.hours.map(
              //   (item) => item.substring(item.length - 2) + ":00"
              // );
              // _this.hourData.hours = time;
              _this.provinceday(_this.dayData.value);
            } else {
              _this.dayData.value = [];
              _this.provinceday(_this.dayData.value);
            }
          })
          .catch(function (error) {
            //请求失败
            console.log(error);
          });
      } else if (_this.areaCode == "" && _this.situationtitle != "全网") {
        let params = new URLSearchParams();
        params.append("dataType", _this.situationtitle);
        _this.$ajax
          .post(`${baseURL.ip1}/pc/getBusinessStatisticsData_hour`, params)
          .then(function (res) {
            //请求成功
            let resData = res.data;
            if (resData.code == 200) {
              _this.dayData.value = [];
              // _this.hourData.hours = [];
              resData.data.forEach((item) => {
                // 用户数
                _this.dayData.value.push(item.tcp_create_time);
                // 日期
                // _this.hourData.hours.push(item.hour + "");
              });
              // let time = [];
              // time = _this.hourData.hours.map(
              //   (item) => item.substring(item.length - 2) + ":00"
              // );
              // _this.hourData.hours = time;
              _this.provinceday(_this.dayData.value);
            } else {
              _this.dayData.value = [];
              _this.provinceday(_this.dayData.value);
            }
          })
          .catch(function (error) {
            //请求失败
            console.log(error);
          });
      } else if (_this.areaCode != "" && _this.situationtitle == "全网") {
        let params = new URLSearchParams();
        params.append("cityCode", _this.areaCode);
        _this.$ajax
          .post(`${baseURL.ip1}/pc/getBusinessStatisticsData_hour`, params)
          .then(function (res) {
            //请求成功
            let resData = res.data;
            if (resData.code == 200) {
              _this.dayData.value = [];
              // _this.hourData.hours = [];
              resData.data.forEach((item) => {
                // 用户数
                _this.dayData.value.push(item.tcp_create_time);
                // 日期
                // _this.hourData.hours.push(item.hour + "");
              });
              // let time = [];
              // time = _this.hourData.hours.map(
              //   (item) => item.substring(item.length - 2) + ":00"
              // );
              // _this.hourData.hours = time;
              _this.provinceday(_this.dayData.value);
            } else {
              _this.dayData.value = [];
              _this.provinceday(_this.dayData.value);
            }
          })
          .catch(function (error) {
            //请求失败
            console.log(error);
          });
      } else {
        let params = new URLSearchParams();
        params.append("cityCode", _this.areaCode);
        params.append("dataType", _this.situationtitle);
        _this.$ajax
          .post(`${baseURL.ip1}/pc/getBusinessStatisticsData_hour`, params)
          .then(function (res) {
            //请求成功
            let resData = res.data;
            if (resData.code == 200) {
              _this.dayData.value = [];
              // _this.hourData.hours = [];
              resData.data.forEach((item) => {
                // 用户数
                _this.dayData.value.push(item.tcp_create_time);
                // 日期
                // _this.hourData.hours.push(item.hour + "");
              });
              // let time = [];
              // time = _this.hourData.hours.map(
              //   (item) => item.substring(item.length - 2) + ":00"
              // );
              // _this.hourData.hours = time;
              _this.provinceday(_this.dayData.value);
            } else {
              _this.dayData.value = [];
              _this.provinceday(_this.dayData.value);
            }
          })
          .catch(function (error) {
            //请求失败
            console.log(error);
          });
      }
    },
    getDataListmonth() {
      let _this = this;
      if (_this.areaCode == "" && _this.situationtitle == "全网") {
        // 小时趋势图数据
        _this.$ajax
          .post(`${baseURL.ip1}/pc/getBusinessStatisticsData_hour`)
          .then(function (res) {
            //请求成功
            let resData = res.data;
            if (resData.code == 200) {
              _this.monthData.value = [];
              resData.data.forEach((item) => {
                // 用户数
                _this.monthData.value.push(item.tcp_suc_req_time);
                // 日期
                //  _this.hourData.hours.push(item.hour + "");
              });
              let time = [];
              // time = _this.hourData.hours.map(
              //   (item) => item.substring(item.length - 2) + ":00"
              // );
              // _this.hourData.hours = time;
              time = _this.monthData.value.slice(-13, -1);
              _this.monthData.value = time;
              _this.provincemonth(_this.monthData.value);
            } else {
              _this.monthData.value = [];
              _this.provincemonth(_this.monthData.value);
            }
          })
          .catch(function (error) {
            //请求失败
            console.log(error);
          });
      } else if (_this.areaCode == "" && _this.situationtitle != "全网") {
        let params = new URLSearchParams();
        params.append("dataType", _this.situationtitle);
        _this.$ajax
          .post(`${baseURL.ip1}/pc/getBusinessStatisticsData_hour`, params)
          .then(function (res) {
            //请求成功
            let resData = res.data;
            if (resData.code == 200) {
              _this.monthData.value = [];
              // _this.hourData.hours = [];
              resData.data.forEach((item) => {
                // 用户数
                _this.monthData.value.push(item.tcp_suc_req_time);
                // 日期
                // _this.hourData.hours.push(item.hour + "");
              });
              let time = [];
              // time = _this.hourData.hours.map(
              //   (item) => item.substring(item.length - 2) + ":00"
              // );
              // _this.hourData.hours = time;
              time = _this.monthData.value.slice(-13, -1);
              _this.monthData.value = time;
              _this.provincemonth(_this.monthData.value);
            } else {
              _this.monthData.value = [];
              _this.provincemonth(_this.monthData.value);
            }
          })
          .catch(function (error) {
            //请求失败
            console.log(error);
          });
      } else if (_this.areaCode != "" && _this.situationtitle == "全网") {
        let params = new URLSearchParams();
        params.append("cityCode", _this.areaCode);
        _this.$ajax
          .post(`${baseURL.ip1}/pc/getBusinessStatisticsData_hour`, params)
          .then(function (res) {
            //请求成功
            let resData = res.data;
            if (resData.code == 200) {
              _this.monthData.value = [];
              // _this.hourData.hours = [];
              resData.data.forEach((item) => {
                // 用户数
                _this.monthData.value.push(item.tcp_suc_req_time);
                // 日期
                // _this.hourData.hours.push(item.hour + "");
              });
              let time = [];
              // time = _this.hourData.hours.map(
              //   (item) => item.substring(item.length - 2) + ":00"
              // );
              // _this.hourData.hours = time;
              time = _this.monthData.value.slice(-13, -1);
              _this.monthData.value = time;
              _this.provincemonth(_this.monthData.value);
            } else {
              _this.monthData.value = [];
              _this.provincemonth(_this.monthData.value);
            }
          })
          .catch(function (error) {
            //请求失败
            console.log(error);
          });
      } else {
        let params = new URLSearchParams();
        params.append("cityCode", _this.areaCode);
        params.append("dataType", _this.situationtitle);
        _this.$ajax
          .post(`${baseURL.ip1}/pc/getBusinessStatisticsData_hour`, params)
          .then(function (res) {
            //请求成功
            let resData = res.data;
            if (resData.code == 200) {
              _this.monthData.value = [];
              // _this.hourData.hours = [];
              resData.data.forEach((item) => {
                // 用户数
                _this.monthData.value.push(item.tcp_suc_req_time);
                // 日期
                // _this.hourData.hours.push(item.hour + "");
              });
              let time = [];
              // time = _this.hourData.hours.map(
              //   (item) => item.substring(item.length - 2) + ":00"
              // );
              // _this.hourData.hours = time;
              // console.log(_this.monthData.value);
              time = _this.monthData.value.slice(-13, -1);
              _this.monthData.value = time;
              _this.provincemonth(_this.monthData.value);
            } else {
              _this.monthData.value = [];
              _this.provincemonth(_this.monthData.value);
            }
          })
          .catch(function (error) {
            //请求失败
            console.log(error);
          });
      }
    },
    // 城市
    province: function (name, data) {
      let myChart = this.$echarts.init(document.getElementById("province"));
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        grid: {
          left: "2%",
          // right: "35%",
          bottom: "5%",
          top: "15%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: name,
          axisLabel: {
            show: true,
            interval: 0,
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            type: "bar",
            data: data,
            symbol: "none",
            smooth: 0.2,
            barWidth: 30,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#00ECFF" },
                { offset: 0.5, color: "#10AEFF" },
                { offset: 1, color: "#1273F7" },
              ]),
            },
          },
        ],
      });
    },
    // 小时
    provincehour: function (name, data) {
      let myChart = this.$echarts.init(document.getElementById("provincehour"));
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        grid: {
          left: "5%",
          bottom: 60,
          right: "2%",
        },
        dataZoom: [
          {
            type: "inside",
          },
          {
            type: "slider",
          },
        ],
        xAxis: {
          data: name,
          silent: false,
          splitLine: {
            show: false,
          },
          splitArea: {
            show: false,
          },
          axisLabel: {
            show: true,
            interval: 0,
            textStyle: {
              fontSize: 14,
            },
          },
        },
        yAxis: {
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 14,
            },
          },
          splitArea: {
            show: false,
          },
        },
        series: [
          {
            type: "bar",
            data: data,
            large: true,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#00ECFF" },
                { offset: 0.5, color: "#10AEFF" },
                { offset: 1, color: "#1273F7" },
              ]),
            },
          },
        ],
      });
    },
    //日期
    provinceday: function (data) {
      let myChart = this.$echarts.init(document.getElementById("provinceday"));
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        grid: {
          left: "5%",
          bottom: 60,
          right: "2%",
        },
        dataZoom: [
          {
            type: "inside",
          },
          {
            type: "slider",
          },
        ],
        xAxis: {
          data: [
            "11-8",
            "11-9",
            "11-10",
            "11-11",
            "11-12",
            "11-13",
            "11-14",
            "11-15",
            "11-16",
            "11-17",
            "11-18",
            "11-19",
            "11-20",
            "11-21",
            "11-22",
            "11-23",
            "11-24",
            "11-25",
            "11-26",
            "11-27",
            "11-28",
            "11-29",
            "11-30",
            "12-1",
            "12-2",
          ],
          silent: false,
          splitLine: {
            show: false,
          },
          splitArea: {
            show: false,
          },
          axisLabel: {
            show: true,
            interval: 0,
            textStyle: {
              fontSize: 14,
            },
          },
        },
        yAxis: {
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 14,
            },
          },
          splitArea: {
            show: false,
          },
        },
        series: [
          {
            type: "bar",
            data: data,
            large: true,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#00ECFF" },
                { offset: 0.5, color: "#10AEFF" },
                { offset: 1, color: "#1273F7" },
              ]),
            },
          },
        ],
      });
    },
    // 月份
    provincemonth: function (data) {
      let myChart = this.$echarts.init(
        document.getElementById("provincemonth")
      );
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        grid: {
          left: "5%",
          // bottom: 60,
          right: "2%",
        },
        // dataZoom: [
        //   {
        //     type: "inside",
        //   },
        //   {
        //     type: "slider",
        //   },
        // ],
        xAxis: {
          data: ["12", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"],
          silent: false,
          splitLine: {
            show: false,
          },
          splitArea: {
            show: false,
          },
          axisLabel: {
            show: true,
            interval: 0,
            textStyle: {
              fontSize: 14,
            },
          },
        },
        yAxis: {
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 14,
            },
          },
          splitArea: {
            show: false,
          },
        },
        series: [
          {
            type: "bar",
            data: data,
            large: true,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#00ECFF" },
                { offset: 0.5, color: "#10AEFF" },
                { offset: 1, color: "#1273F7" },
              ]),
            },
          },
        ],
      });
    },
  },
};
</script>

<style scoped>
#province,
#provinceday,
#provincemonth,
#provincehour {
  width: 54vw;
  height: 27vh;
}
</style>